<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>例子</title>

    <!-- Icons -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application -->
    <link href="css/style.css" rel="stylesheet">
    <link href="js/skin/layer.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
</head>

<body class="app header-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
</header>

<div class="app-body">
    <div class="sidebar">
        <nav class="sidebar-nav" id="sidebar">
        </nav>
    </div>

    <main class="main">
        <div class="list-page">
            <div class="topbar">
                <button class="btn btn-primary" onclick="create_app()">新建应用</button>
            </div>
            <div class="tablepanel">
                <table id="table" class="table">
                </table>
            </div>
        </div>
    </main>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/layer.js"></script>
<script src="./js/apiservice.js"></script>
<script src="./js/init.js"></script>
<script>

    function create_app() {
        var layerid = layer.prompt({title: "输入应用名"}, function (name) {
            console.log(name);

            dataservice.getCurrentUser(function (userid) {
                dataservice.insert("insert into app(userid, name) values('" + userid +
                    "', '" + name +
                    "')",
                    function () {
                        location.reload();
                    }
                );
            });

            layer.close(layerid);

        });
    }

    function delete_app(id){
        dataservice.deleteRecord("delete from app where id = " + id, function(){
            location.reload();
        });
    }

    function renderTable(id, columns, data) {

        var header = "<tr>";
        columns.forEach(function (col) {
            header += "<th>" + col.title + "</th>";
        });
        header += "</tr>";

        var body = "";
        data.forEach(function (row) {
            var rowhtml = "<tr>";
            columns.forEach(function (col) {
                var content = row[col.name];
                if (col.template) {
                    content = col.template(content, row);
                }
                rowhtml += "<td>" + content + "</td>";
            });
            rowhtml += "</tr>";

            body += rowhtml;
        });

        $("#" + id).html(header + body);

    }

    dataservice.getCurrentUser(function (userid) {

        dataservice.queryList("select * from app where userid = '" + userid + "'",
            function (data) {
                console.log(data);

                var cols = [
                    {
                        title: "应用名称",
                        name: "name"
                    },
                    {
                        title: "创建者",
                        name: "userid"
                    },
                    {
                        title: "操作",
                        name: "op",
                        template: function (value, row) {
                            return '<button class="btn btn-outline-info btn-sm" onclick="" >修改</button> ' +
                                '<button class="btn btn-outline-danger btn-sm" onclick="delete_app(' + row.id +
                                ')" >删除</button>';
                        }
                    }
                ];

                renderTable("table", cols, data);
            });

    });

</script>

</body>

</html>